<template>
  <Main :data="listData" :footer-lock="false">
    <el-table-column
      label="信息"
      align="center"
      property="config_val"
    ></el-table-column>
    <el-table-column label="使用" align="center">
      <template slot-scope="scope">
        <el-checkbox
          v-model="scope.row.is_used"
          @change="
            checkboxTag(scope.row.setting_id, 'is_used', scope.row.is_used)
          "
        ></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="必填" align="center">
      <template slot-scope="scope">
        <el-checkbox
          v-model="scope.row.is_required"
          @change="
            checkboxTag(
              scope.row.setting_id,
              'is_required',
              scope.row.is_required
            )
          "
        ></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="可修改" align="center">
      <template slot-scope="scope">
        <el-checkbox
          v-model="scope.row.is_update"
          @change="
            checkboxTag(scope.row.setting_id, 'is_update', scope.row.is_update)
          "
        ></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="信息格式" align="center">
      <template slot-scope="scope">
        <div v-if="scope.row.type === 1">文本</div>
        <div v-if="scope.row.type === 2">时间</div>
        <div v-if="scope.row.type === 3">
          预设文本&nbsp;&nbsp;
          <el-select
            v-model="scope.row.type_contents"
            size="small"
            placeholder="请选择"
          >
            <el-option
              v-for="item in scope.row.type_content.split(',')"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
      </template>
    </el-table-column>

    <!-- <Footer>
      <el-pagination
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        :current-page="pages"
        @current-change="changes"
      >
      </el-pagination>
    </Footer> -->
  </Main>
</template>
<script>
import { SETCUSMOTERDATASETTING } from "../../service";

export default {
  data() {
    return {
      listData: [],
      totals: 0,
      pages: 1
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList(json) {
      await SETCUSMOTERDATASETTING(json).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          data.forEach(ele => {
            ele.is_required = ele.is_required === 1;
            ele.is_update = ele.is_update === 0;
            ele.is_used = ele.is_used === 1;
            ele.type_contents = "";
          });
          this.listData = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },
    checkboxTag(settingId, keys, val) {
      let vals;
      if (keys === "is_update") {
        vals = val ? 0 : 1;
      } else {
        vals = val ? 1 : 0;
      }
      this.getList({
        flag: "save",
        setting_id: settingId,
        keys,
        val: vals
      });
    }
  }
};
</script>
